
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

        <title>Mobiscroll日期时间中文精简实例</title>
        <script src="js/jquery.1.7.2.min.js"></script>  
        <script src="js/mobiscroll_002.js" type="text/javascript"></script>
        <script src="js/mobiscroll_004.js" type="text/javascript"></script>
        <link href="css/mobiscroll_002.css" rel="stylesheet" type="text/css">
        <link href="css/mobiscroll.css" rel="stylesheet" type="text/css">
        <script src="js/mobiscroll.js" type="text/javascript"></script>                               
        <script src="js/mobiscroll_003.js" type="text/javascript"></script>          
        <script src="js/mobiscroll_005.js" type="text/javascript"></script>
        <link href="css/mobiscroll_003.css" rel="stylesheet" type="text/css">
        <style type="text/css">
            input, select {
                width: 100%;
                padding: 5px;
                margin: 5px 0;
                border: 1px solid #aaa;
                box-sizing: border-box;
                border-radius: 5px;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                -webkit-border-radius: 5px;
            }
            .content {
                padding: 15px;
                background: #fff;
            }
        </style>
    </head>

    <body>


        <div class="content">

            <div class="demos">
                <label for="appDateTime">日期时间</label>
                <input class="" readonly="readonly" name="appDateTime" id="appDateTime" type="text">
            </div>
        </div>
        <script type="text/javascript">            
             function getNowFormatDate() {
                var date = new Date();
                var seperator1 = "-";
                var seperator2 = ":";
                var month = date.getMonth() + 1;
                var strDate = date.getDate();
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                }
                var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate+ " " + date.getHours() + seperator2 + date.getMinutes()+ seperator2 + date.getSeconds();
                return currentdate;
            }
            $("#appDateTime").val(getNowFormatDate());
            $(function () {
                var currYear = (new Date()).getFullYear();
                var opt = {};
                opt.date = {preset: 'date'};
                opt.datetime = {preset: 'datetime'};
                opt.time = {preset: 'time'};
                opt.default = {
                    theme: 'android-ics light', //皮肤样式
                    display: 'modal', //显示方式 
                    mode: 'scroller', //日期选择模式
                    dateFormat: 'yyyy-mm-dd',
                    lang: 'zh',
                    showNow: true,
                    nowText: "现在",
                    startYear: currYear-99, //开始年份
                    endYear: currYear + 99 //结束年份
                };

                $("#appDate").mobiscroll($.extend(opt['date'], opt['default']));
                var optDateTime = $.extend(opt['datetime'], opt['default']);
                var optTime = $.extend(opt['time'], opt['default']);
                $("#appDateTime").mobiscroll(optDateTime).datetime(optDateTime);
                $("#appTime").mobiscroll(optTime).time(optTime);
            });
            
//           alert();
        </script>
    </body>
</html>